<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}
	.carbox {
		width: 710rpx;
		background: #fff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		border: 1rpx solid #ccc;
		box-sizing: border-box;
		padding: 10rpx;
		.carstop {
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #c1c1c1;
		}
		.card-item {
			display: flex;
			justify-content: start;
			.card-left {
				width: 100rpx;
				// height: 100rpx;
				margin: 10rpx;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
				}
			}
			.card-right {
				margin: 10rpx;
				.sh {
					width: 500rpx;
					height: 40rpx;
					display: flex;
					margin-top: 5rpx;
					justify-content: space-between;
					.xt {
						color: #ccc;
						margin-left: 100rpx;
					}
				}
			}
			
		}
		.totalbox {
			display: flex; 
			margin-top: 20rpx;
			justify-content: flex-end;
			margin-right: 30rpx;
		}
	}
</style>
<template>
	<!-- 分段器组件 -->
 <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#e60012"></uni-segmented-control>
        <view class="content">
            <view v-show="current === 0">
                全部
            </view>
            <view v-show="current === 1">
                历史
            </view>
            <view v-show="current === 2">
                退单
            </view>
        </view>
		
		<view class="carbox" >
			<view class="carstop">
				北京路店
			</view>
			<view class="card-item" v-for="item in menulist.goods">
				<view class="card-left">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="card-right">
						<view class="sh">
							<view class="title">{{item.moreName}}</view>
							<view class="xt">已完成</view>
						</view>
						<view class="sh">
							<view class="count">x <text>{{item.counts}}</text></view>
							<view class="price">￥{{item.counts * item.price}}</view>
						</view>
						
						
						
					</view>
				</view>
				<view class="totalbox">
					<div class="totalcount">共<text>{{rescount}}</text></div>,
					<div class="totalprice">总价￥<text>{{resprice}}</text></div>
				</view>
			</view>
</template>

<script setup>
	import {computed, ref} from 'vue'
	import { getbuyone } from '../../api/publish';
	const menulist = ref([])
	const items =ref(['全部','历史','退单'])
	const render= async()=>{
		const res = await getbuyone()
		menulist.value = res.data
		console.log(menulist.value)
	}
	render()
	
	const rescount = computed(()=>{
		return menulist?.value.goods.reduce((prev,item)=>prev+item.counts,0)
	})
	const resprice = computed(()=>{
		return menulist?.value.goods.reduce((prev,item)=>prev+item.price,0)
	})

</script>


